<template>
  <div>
    <router-view>
      <template v-slot="{ Component, route }">
        <transition name="fade" mode="out-in" :appear="true">
          <keep-alive>
            <component
              v-if="appStateStore.reloadFlag"
              :is="Component"
              :key="route.fullPath"
            ></component>
          </keep-alive>
        </transition>
      </template>
    </router-view>
  </div>
</template>

<script lang="ts" setup>
// 将transition 的name设置成动态的, 就可以改变进入/离开页面时的效果了.

import { useAppStateStore } from "@/store/modules/system/appState";

const appStateStore = useAppStateStore();
</script>

<style scoped></style>
